
function init(){
	
	var ubwidget = $("#ubwidget").ubwidget({
		width:252,
		height:89
	});
		
	var space = $("<div style='font-size:15px'>h</div>").ubwbutton({w:17, h:68});
		space.find(".ubw-button-body").css({
			borderLeft:"none",
			borderRight:"none"
		});
	var spaceb = $("<div style='font-size:15px'>m</div>").ubwbutton({w:17, h:68});
		spaceb.find(".ubw-button-body").css({
			borderLeft:"none",
			borderRight:"none"
		});
		spaceb.find(".ubw-button-canvas").unbind("mouseenter");
	var spacec = $("<div style='font-size:15px'>s</div>").ubwbutton({w:17, h:68});
		spacec.find(".ubw-button-body").css({
			borderLeft:"none",
			borderRight:"none"
		});
		spacec.find(".ubw-button-canvas").unbind("mouseenter");
		
			var hours = $("<div class='scroll' id='hours'>00</div>").ubwbutton({w:52, h:68}, {bottom:1, top:1, right:0, left:0});
				hours.find(".ubw-button-body").css({
					borderRight:"none"
				});
			var minutes = $("<div class='scroll' id='minutes'>00</div>").ubwbutton({w:52, h:68}, {bottom:1, top:1, right:0, left:0});
				minutes.find(".ubw-button-body").css({
					borderLeft:"none",
					borderRight:"none"
				});
			var seconds = $("<div class='scroll' id='seconds'>00</div>").ubwbutton({w:52, h:68}, {bottom:1, top:1, right:0, left:0});
				seconds.find(".ubw-button-body").css({
					borderLeft:"none",
					borderRight:"none"
				});
			var pause = $("<div id='pausebutton'><img src='images/button_pause_invert.png'></div>")
				pause.css({
					marginLeft:8, 
					marginTop:3,
					marginBottom:-2,
					height:47
				});
				
			var reset = $("<div id='resetbutton'><img src='images/button_reset_invert.png'></div>")
				.css({
					marginLeft:8, 
					marginTop:1
				})
				.click(function(){
					$("#hours").find(".ubw-button-content").text("00");
					$("#minutes").find(".ubw-button-content").text("00");
					$("#seconds").find(".ubw-button-content").text("00");
					clearTimeout(currentTimer);
					if(play){
						$("#pausebutton").trigger("click");
					}
				});
			
			if (window.widget) {
			   window.widget.onremove = function(){
					if(play){
			   			$("#pausebutton").trigger("click");
					};
				};
			};
					
			pause.toggle(
				function(){
					play = false;
					clearTimeout(currentTimer);
					$(this).find("img").attr("src", "images/button_play_invert.png");
				},
				function(){
					play = true;
					var timeInSeconds = parseInt($("#seconds").find(".ubw-button-content").text(), 10) +
										parseInt($("#minutes").find(".ubw-button-content").text(), 10)*60 + 
										parseInt($("#hours").find(".ubw-button-content").text(), 10)*3600;
		
					updateChronometerReverse(timeInSeconds);
					
					$(this).find("img").attr("src", "images/button_pause_invert.png");
				}
			);/*.mouseenter(function(){
				var o = $(this).find("img").attr("src");
				$(this).find("img").attr("src", o.split(".")[0]+"xov.png");
			}).mouseout(function(){
				var o = $(this).find("img").attr("src");
				$(this).find("img").attr("src", o.split("x")[0]+".png");
			});*/
			
			setTimeout(function(){pause.trigger("click")}, 200);
			
			hours
				.bind("mousedown", {button:hours}, timeButtonDownHandler)
				.find(".ubw-button-arrowTop").bind("mousedown",{button:hours}, addbtn);
			hours
				.find(".ubw-button-arrowBottom").bind("mousedown",{button:hours}, rembtn);
			minutes
				.bind("mousedown", {button:minutes}, timeButtonDownHandler)
				.find(".ubw-button-arrowTop").bind("mousedown",{button:minutes}, addbtn);
			minutes
				.find(".ubw-button-arrowBottom").bind("mousedown",{button:minutes}, rembtn);
			seconds
				.bind("mousedown", {button:seconds}, timeButtonDownHandler)
				.find(".ubw-button-arrowTop").bind("mousedown",{button:seconds}, addbtn);
			seconds
				.find(".ubw-button-arrowBottom").bind("mousedown",{button:seconds}, rembtn);
		
			$(document).mouseup(function(){
				/*if(isScrolling){
					$().unbind("mousemove");
					activeTimeScroll.find(".ubw-button-canvas")
						.bind("mouseleave", {button:activeTimeScroll}, buttonOutHandler)
						.bind("mouseenter", {button:activeTimeScroll}, buttonOverHandler);
				};*/
				clearTimeout(incDecTime);
			});
			
			var btnsWrapper = $("<div></div>")
				.css({
					float:"left",
					marginLeft:5,
					marginTop:6
				})
				.append(pause)
				.append(reset);
			
			ubwidget
				.append(hours)
				.append(space.clone())
				.append(minutes)
				.append(spaceb)
				.append(seconds)
				.append(spacec)
				.append(btnsWrapper);
			
			clearTimeout(currentTimer);
			updateChronometer(0);

	var currentTimer = null;
	var incDecTime = null;
	var play = true;
	var isScrolling = false;	
	var reverse = true;
	var activeTimeScroll = null;
				
	function addbtn(m){
	
		var button = m.data.button;
		var content = button.find(".ubw-button-content");
		
		if(content.text().substr(0, 1) == "0"){
			content.text(content.text().substr(1, content.text().length))
		}

		content.text(formatTime(parseInt(content.text())+1));	
		
		incDecTime = setTimeout(function(){addbtn(m)},150);
	};	
	
	function rembtn(m){
	
		var button = m.data.button;
		var content = button.find(".ubw-button-content");
		
		if(content.text().substr(0, 1) == "0"){
			content.text(content.text().substr(1, content.text().length))
		}
		
		content.text(formatTime(parseInt(content.text())-1));
		
		incDecTime = setTimeout(function(){rembtn(m)},150);
	};	
				
	function timeButtonDownHandler(m){
		var button = m.data.button;
		var mouseStart = {pageX:m.pageX, pageY:m.pageY};
		var content = button.find(".ubw-button-content");
		var val = content.text();
		isScrolling = true;
		reverse = true;
		activeTimeScroll = button;
		if(play){
			$("#pausebutton").trigger("click");
		}
		
		/*button.find(".ubw-button-canvas")
			.unbind("mouseenter")
			.unbind("mouseleave");
			
		$().bind("mousemove", function(e){
			var value = {
				x:mouseStart.pageX-e.pageX, 
				y:mouseStart.pageY-e.pageY
			};
			hvalue = Math.floor(value.y/10);
			content.text(parseInt(val)+Math.floor(hvalue));
			
			content.text(content.text()%60);
			if(content.text() < 0)content.text(0);
		});*/
	};

	function buttonOverHandler(e) {
		var button = e.data.button;
		var buttonbody = button.find(".ubw-button-body");
								
		button.css({zIndex:1})
		buttonbody.removeClass("ubw-button-out")
			.addClass("ubw-button-over")
			.css({fontSize:"125%"});
			
		button.find(".ubw-button-canvas").find(".ubw-button-arrowTop").children("img").attr("src", "images/arrows_over/top.png");
		button.find(".ubw-button-canvas").find(".ubw-button-arrowBottom").children("img").attr("src", "images/arrows_over/bottom.png");	
	};

	function buttonOutHandler(e){
		var button = e.data.button;
		var buttonbody = button.find(".ubw-button-body");
				
		button.css({zIndex:0});
		buttonbody.removeClass("ubw-button-over")
			.addClass("ubw-button-out")					
			.css({
				fontSize:"100%",
			});
			
		button.find(".ubw-button-canvas").find(".ubw-button-arrowTop").children("img").attr("src", "images/arrows_out/top.png");
		button.find(".ubw-button-canvas").find(".ubw-button-arrowBottom").children("img").attr("src", "images/arrows_out/top.png");			
	};

	function updateChronometerReverse(seconds){
		
		currentTimer = setTimeout(function(){updateChronometerReverse(seconds-1)}, 1000);
		if (seconds < 6 && seconds > 0){
			DHTMLSound('beep.wav');
		}else if(seconds === 0){
			DHTMLSound('finalbeep.wav');
		};
		
		if(seconds < 1){
			seconds = 0;
			$("#pausebutton").trigger("click");
		}
	
		var hoursValue = $("#hours").find(".ubw-button-content");
		var minutesValue = $("#minutes").find(".ubw-button-content");
		var secondsValue = $("#seconds").find(".ubw-button-content");
	
		var currentSecond = String(seconds%60);
		var currentMinute = String(Math.floor(seconds/60)%60);
		var currentHour = String(Math.floor(seconds/3600));
		
		hoursValue.text(formatTime(currentHour));
		minutesValue.text(formatTime(currentMinute));
		secondsValue.text(formatTime(currentSecond));
		
	}	
	
	function formatTime(time){
		
		document.title = time +", " + String(time).length;
		
		if(time<0){
			time = 59;
		}
		
		time = time%60;
	
		String(time).length < 2 ? time = "0"+time : time = time;
	
		return time;		
	}
	
	function DHTMLSound(surl) {
	  	document.getElementById("audio").innerHTML= 
			"<audio src='"+surl+"' autoplay=true >";
	}
}